
@include('Admin.public.head')
<style type="text/css">
  #my-popup2 {
    max-height: 320px;}
  #my-popup {height: auto;}

  .admin-content .am-popup {
    max-height: none;
    border-radius: 4px;
    overflow: hidden;
  }
</style>
<body>
@include('Admin.public.menu')
<div class=" admin-content" id="app">
  {{ csrf_field() }}
  <div class="daohang">
  </div>
  <!--添加模态框-->
  <div class="am-popup am-popup-inner" id="my-popup">
    <div class="am-popup-hd">
      <h4 class="am-popup-title">添加公司核心人员</h4>
      <span data-am-modal-close
            class="am-close">&times;</span>
    </div>
    <div class="am-popup-bd">
      <form class="am-form">
        <div class="am-form-group am-cf">
          <label class="sr-only" for="district1" >账号</label>
          <div class="you">
            <input  v-on:blur="upperCase()" class="am-form-field"  v-model="address.name" placeholder="请输入账号">
          </div>
        </div>
        <span class="sr-only">系统姓名：</span><span style="color: red;">@{{ user_name }}</span>
        <div class="am-form-group am-cf" >
          <label class="sr-only" for="district1" >姓名</label>
          <div class="you">
            <input class="am-form-field"  v-model="address.user_name" placeholder="请输入姓名">
          </div>
        </div>
        <div class="am-form-group am-cf" style="display: flex;">
          <div class="zuo">一级合伙人：</div>
          <div class="you">
            <label class="am-checkbox-inline">
              <input type="radio" value="1" v-model="address.is_one" data-am-ucheck=""
                     class="am-ucheck-radio">
              <span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i
                        class="am-icon-checked"></i></span>是
            </label>
            <label class="am-checkbox-inline">
              <input type="radio" value="0" v-model="address.is_one" data-am-ucheck=""
                     class="am-ucheck-radio">
              <span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i
                        class="am-icon-checked"></i></span>否
            </label>
          </div>
        </div>

        <div class="am-form-group am-cf" style="display: flex;">
          <div class="zuo">二级合伙人：</div>
          <div class="you">
            <label class="am-checkbox-inline">
              <input type="radio" value="1" v-model="address.is_two" data-am-ucheck=""
                     class="am-ucheck-radio">
              <span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i
                        class="am-icon-checked"></i></span>是
            </label>
            <label class="am-checkbox-inline">
              <input type="radio" value="0" v-model="address.is_two" data-am-ucheck=""
                     class="am-ucheck-radio">
              <span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i
                        class="am-icon-checked"></i></span>否
            </label>
          </div>
        </div>


        <div class="am-form-group am-cf" style="display: flex;">
          <div class="zuo">三级合伙人：</div>
          <div class="you">
            <label class="am-checkbox-inline">
              <input type="radio" value="1" v-model="address.is_three" data-am-ucheck=""
                     class="am-ucheck-radio">
              <span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i
                        class="am-icon-checked"></i></span>是
            </label>
            <label class="am-checkbox-inline">
              <input type="radio" value="0" v-model="address.is_three" data-am-ucheck=""
                     class="am-ucheck-radio">
              <span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i
                        class="am-icon-checked"></i></span>否
            </label>
          </div>
        </div>
        <div class="am-text-center" style="margin-top: 20px ">
          <a type="button" v-on:click="doApply()" class="am-btn am-btn-primary">添加</a>
        </div>
      </form>
    </div>
  </div>

  <div class="am-popup am-popup-inner" id="my-popup1" style="height: auto;">
    <div class="am-popup-hd">
      <h4 class="am-popup-title">编辑</h4>
      <span data-am-modal-close
            class="am-close">&times;</span>
    </div>
    <div class="am-popup-bd">
      <form class="am-form">
        <div class="am-form-group am-cf">
          <label class="sr-only" for="district1" >合伙人账号</label>
          <div class="you">
            <input  v-on:blur="upperCase()" class="am-form-field" disabled="disabled"  v-model="address.name" placeholder="请输入账号">
          </div>
        </div>
        <span class="sr-only">系统姓名：</span><span style="color: red;">@{{ user_name }}</span>
        <div class="am-form-group am-cf" >
          <label class="sr-only" for="district1" >合伙人姓名</label>
          <div class="you">
            <input  class="am-form-field"  v-model="address.user_name" placeholder="请输入姓名">
          </div>
        </div>

        <div class="am-form-group am-cf" style="display: flex;">
          <div class="zuo">一级合伙人：</div>
          <div class="you">
            <label class="am-checkbox-inline">
              <input type="radio" value="1" v-model="address.is_one" data-am-ucheck=""
                     class="am-ucheck-radio">
              <span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i
                        class="am-icon-checked"></i></span>是
            </label>
            <label class="am-checkbox-inline">
              <input type="radio" value="0" v-model="address.is_one" data-am-ucheck=""
                     class="am-ucheck-radio">
              <span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i
                        class="am-icon-checked"></i></span>否
            </label>
          </div>
        </div>

        <div class="am-form-group am-cf" style="display: flex;">
          <div class="zuo">二级合伙人：</div>
          <div class="you">
            <label class="am-checkbox-inline">
              <input type="radio" value="1" v-model="address.is_two" data-am-ucheck=""
                     class="am-ucheck-radio">
              <span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i
                        class="am-icon-checked"></i></span>是
            </label>
            <label class="am-checkbox-inline">
              <input type="radio" value="0" v-model="address.is_two" data-am-ucheck=""
                     class="am-ucheck-radio">
              <span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i
                        class="am-icon-checked"></i></span>否
            </label>
          </div>
        </div>
        <div class="am-form-group am-cf" style="display: flex;">
          <div class="zuo">三级合伙人：</div>
          <div class="you">
            <label class="am-checkbox-inline">
              <input type="radio" value="1" v-model="address.is_three" data-am-ucheck=""
                     class="am-ucheck-radio">
              <span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i
                        class="am-icon-checked"></i></span>是
            </label>
            <label class="am-checkbox-inline">
              <input type="radio" value="0" v-model="address.is_three" data-am-ucheck=""
                     class="am-ucheck-radio">
              <span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i
                        class="am-icon-checked"></i></span>否
            </label>
          </div>
        </div>

        <div class="am-text-center" style="margin-top: 20px ">
          <a type="button" v-on:click="doApply1()" class="am-btn am-btn-primary">保存</a>
        </div>
      </form>
    </div>
  </div>
  <div class="admin-biaogelist">
    <div class="listbiaoti am-cf">
      <ul class="am-icon-users"> 平台合伙人管理</ul>
      <dl>
        <button type="button" data-am-modal="{target: '#my-popup'}" class="am-btn am-btn-danger am-round am-btn-xs am-icon-plus" >
          添加合伙人
        </button>
      </dl>
      <dl class="am-icon-home" style="float: right;">当前位置： 首页 > <a href="#">代理商列表</a></dl>
      <!--这里打开的是新页面-->
    </div>
    <div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">
      <ul>
        <!-- <li>
            <template>
                <el-select v-model="keyword.status" placeholder="代理状态">
                    <el-option
                            size="medium"
                            v-for="item in ordertype"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </li> -->
        <li>
          <template>
            <el-select v-model="keyword.type" placeholder="代理类型">
              <el-option
                      size="medium"
                      v-for="item in ordertype1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
              </el-option>
            </el-select>
          </template>
        </li>

        <li>
          <el-input v-model="keyword.keyword" class="keywords" placeholder="关键词搜索"></el-input>
        </li>
        <li>
          <el-button type="primary" v-on:click="changeClick()">搜索</el-button>
        </li>
        <li> <el-button type="danger" v-on:click="resetOrder()">重置</el-button></li>
      </ul>
    </div>


    <form class="am-form am-g">
      <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
        <thead>
        <tr class="am-success">
          <th class="table-id" style="width: 120px;">姓名</th>
          <th class="table-title">账号</th>
          <th class="table-title">一级合伙人</th>
          <th class="table-title">二级合伙人</th>
          <th class="table-title">三级合伙人</th>
          <th class="table-title">操作人</th>
          <th class="table-type">添加时间</th>
          <th class="table-type">编辑时间</th>
          <th width="130px" class="table-set">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="val,index in ApplyList">
          <td>@{{ val.user_name }}</td>
          <td>@{{ val.name }}</td>

          <td v-show="val.is_one == 1">是</td>
          <td v-show="val.is_one == 0">否</td>

          <td v-show="val.is_two == 1">是</td>
          <td v-show="val.is_two == 0">否</td>


          <td v-show="val.is_three == 1">是</td>
          <td v-show="val.is_three == 0">否</td>


          <td>@{{ val.verifier }}</td>
          <td>@{{ val.created_at }}</td>
          <td>@{{ val.updated_at }}</td>
          <td style="width:250px;">
            <div class="am-btn-toolbar">
              <div class="am-btn-group am-btn-group-xs">
                <a style="background-color: #4db14d;border-color: #4db14d;" class="am-btn am-btn-danger am-radius"  data-am-modal="{target: '#my-popup1'}" v-on:click="doEditor(val)" title="编辑" >编辑</a>
                <a class="am-btn am-btn-danger am-radius"  v-on:click="del(val)" title="删除" >删除</a>
              </div>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <!--分页-->
      <ul class="am-pagination am-fr">
        <div class="block">
          <el-pagination
                  background
                  :page-size="PagesData.per_page"
                  :current-page = "PagesData.current_page"
                  layout="total , prev, pager, next"
                  :total="PagesData.total"
                  @prev-click="changeClick"
                  @next-click="changeClick"
                  @current-change="changeClick">
          </el-pagination>
        </div>
      </ul>

    </form>
    <script src="{{ URL::asset('js/address/distpicker.data.js') }}"></script>
    <script src="{{ URL::asset('js/address/distpicker.js') }}"></script>
    <script>
      var app = new Vue({
        el:"#app",
        data: {
          user_name:'',
          ApplyList : [], //代理商列表
          PagesData:[],//分页
          options: [
            /* {
            value: '0',
            label: '省代理'
        }, */
            {
              value: '1',
              label: '市代理'
            },{
              value: '2',
              label: '县代理'
            }],
          ordertype: [{
            value: '0',
            label: '待审核'
          }, {
            value: '1',
            label: '通过'
          },{
            value: '2',
            label: '拒绝'
          },{
            value: '3',
            label: '回收'
          }],
          ordertype1: [{
            value: 'is_one',
            label: '一级合伙人'
          },{
            value: 'is_two',
            label: '二级合伙人'
          },{
            value: 'is_three',
            label: '三级合伙人'
          }],
          keyword:{ //关键字搜索
            type:'',
            //status:'',
            keyword:'',
            // created_at:'',
          },
          address: {
            'id':'',
            'phone':'',
            'type':'',
            'province':'北京市',
            'city':'',
            'district':'',
            'districts':'',
            'status':'',
            'partner':'',
            'user_name':'',
            'name':'',
            'is_one':0,
            'is_two':0,
            'is_three':0,

          },
        },
        //事件
        methods: {
          obtain:function (val) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
              var pair = vars[i].split("=");
              if(pair[0] == val){
                return pair[1];
              }
            }
          },
          par:function (id) {
            window.location.href="/admin/members/company";
          },
          //选择当前页
          changeClick:function(e){
            var rico = this
            var id = this.obtain('id');
            $.get("/admin/members/companyList",{'_token':'{{csrf_token()}}',class:'select',id:id,page:e,keyword:app.keyword},function (res) {
              if(res.code){
                app.ApplyList = res.data.data
                app.PagesData = res.data
              } else {
                layer.msg(res.data);
              }
            });
          },

          initialize:function () {
            var rico = this
            //代理商列表
            var id = this.obtain('id');
            $.get("/admin/members/companyList",{'_token':'{{csrf_token()}}',class:'select',id:id},function (res) {
              if(res.code){
                app.ApplyList = res.data.data
                app.PagesData = res.data
              } else {
                layer.msg(res.data);
              }
            });

          },
          upperCase:function () {
            if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(app.address.name))){
              layer.msg('请输入正确账号');
              return false;
            }
            $.post("/admin/members/companyList", {'_token': '{{csrf_token()}}',class:'find_member',name:app.address.name}, function (res) {
              if (res.code == 1 ) {
                app.user_name = res.data.user_name
              } else {
                layer.msg(res.data);
              }
            });
          },
          //添加区县
          doDistrict:function () {
            app.address.districts = (app.address.districts == '')?app.address.district:app.address.districts+','+app.address.district
          },
          //代理申请
          doApply:function(){
            var id = this.obtain('id');
            var rico = this
            if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(app.address.name))){
              layer.msg('请输入正确的电话号码');
              return false;
            }
            $.post("/admin/members/companyList", {'_token': '{{csrf_token()}}','class':'add ',name:app.address.name,user_name:app.address.user_name,is_one:app.address.is_one,is_two:app.address.is_two,is_three:app.address.is_three}, function (res) {
              if (res.code) {
                layer.msg(res.data);
                window.location.href="/admin/members/company";
              } else {
                layer.msg(res.data);
              }
            });
          },
          doApply1:function(){
            var id = this.obtain('id');
            $.post("/admin/members/companyList", {'_token': '{{csrf_token()}}',class:'edit',id:app.address.id,name:app.address.name,user_name:app.address.user_name,is_one:app.address.is_one,is_two:app.address.is_two,is_three:app.address.is_three}, function (res) {
              if (res.code) {
                layer.msg(res.data);
                window.location.href="/admin/members/company";
              } else {
                layer.msg(res.data);
              }
            });
          },
          del:function (id) {
            console.log(id)
            $.post("/admin/members/companyList",{'_token':'{{csrf_token()}}',class:'delete',id:id.id},function (res) {
              if(res.code == 1){
                layer.msg(res.data);
                window.location.reload()
              } else {
                layer.msg(res.data);
                window.location.reload()
              }
            });
          },
          //编辑代理
          doEditor:function(data){
            app.address.id = data.id;
            // app.address.partner = data.partner;
            app.address.status = data.status;
            // app.address.type = data.type;
            app.address.phone = data.phone;
            app.address.name = data.name;
            app.address.user_name = data.user_name;

            app.address.is_one = data.is_one;
            app.address.is_two = data.is_two;
            app.address.is_three = data.is_three;

            $.post('/admin/members/companyList',{'_token':'{{csrf_token()}}',class:'find',id:data.id},function(res){
              if(res.code == 1){
                app.user_name = res.data.user_name;
                console.log(res)
              }else{
                layer.msg(res.data);
              }
            })
          },


          //重置
          resetOrder:function(){

            location.reload();
          }
        },

        //自动执行
        mounted: function () {
          this.initialize();//分公司
        },
      })
    </script>
@include('Admin.public.foot')